<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东的轮播图</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        /* 设置图片容器 */
        .img-list{
            width: 590px;
            height:470px;
            margin:100px auto;    
        }
        /* 设置li */
        .img-list li{
            position: absolute;
        }
        /* 通过修改元素的层级来显示指定的图片 */
        .img-list li:nth-child(4){
            z-index:1;
        }
        /* 设置导航点的样式 */
        .pointer{
            position: absolute;
            z-index:9999;
        }
        .pointer a{
            display:block;
            width:20px;
            height:20px;
            background-color: beige;
        }
    </style>


</head>
<body>
    <ul class="img-list">
        <li><a href="javascript;;"><img src="../picture/05/1.jpg"></a></li>
        <li><a href="javascript;;"><img src="../picture/05/2.jpg"></a></li>
        <li><a href="javascript;;"><img src="../picture/05/1.jpg"></a></li>
        <li><a href="javascript;;"><img src="../picture/05/2.jpg"></a></li>
        <li><a href="javascript;;"><img src="../picture/05/1.jpg"></a></li>
        <li><a href="javascript;;"><img src="../picture/05/2.jpg"></a></li>
        <!-- 设置图片中切换的点点 -->
        <div class="pointer">
            <a href="javascript;;"></a>
            <a href="javascript;;"></a>
            <a href="javascript;;"></a>
            <a href="javascript;;"></a>
            <a href="javascript;;"></a>
            <a href="javascript;;"></a>
        </div>
    </ul>
    
</body>
</html>